<template>
  <view class="content">
	  <u-navbar :is-back="false" title="任务列表"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
	  
    <u-tabs :list="tabs" active-color="#1677FF"
      inactive-color="#666666" :current="current"
      @change="change">
    </u-tabs>

    <u-sticky style="height: 110upx;"
      bg-color="#F8F9FC">

      <view class="topsearch el-flex  fff">
        <u-button size="mini"
          @click="timeDialog=true">
          {{info.value.VisitTime ||'选择时间'}}
          <u-icon name="arrow-down-fill">
          </u-icon>
        </u-button>
        <u-picker mode="time" v-model="timeDialog"
          @confirm="changeDate"></u-picker>
        <view class="x-col-center x-col">
          <view class="search">
            <u-search placeholder="请输入搜索客户名称"
              @change="changeSearch"
              shape="square" bg-color="#fff"
              :show-action="false" height="70"
              v-model="info.value.Key">
            </u-search>
          </view>
        </view>
        <u-button size="mini" type="primary"
          @click="dialog=true">预览</u-button>
      </view>

      <!--加一个时间选择框，默认全部时间-->

    </u-sticky>
    <order-item @clickMsg="clickMsg"
      v-for="(item,index) in clist" :li="item"
      :key="index">

      <span slot="label">
        <text class="te1"
          v-if="item.IsVisit==1">未拜访</text>
        <text class="te2" v-else>已拜访</text>
      </span>

      <span slot="footer">
        <view>
          计划拜访：{{item.PlanTime}}
        </view>
        <view v-if="item.IsVisit==10">
          实际拜访：{{item.DoTime}}
        </view>
        <view class="order-footer">
          <navigator class="order-button"
            :url="`/pages/sale/addvisitrecord?fId=${item.id}&taskId=${item.fId}`"
            v-if="item.IsVisit==1">
            添加拜访记录
          </navigator>
          <navigator class="order-button"
            :url="`/pages/sale/visit_records_data?fMrkId=${item.id}&fTaskId=${item.fId}`"
            v-else>
            查看拜访记录
          </navigator>
          <navigator class="order-button"
            :url="`/pages/sale/productstobepurchased?fId=${item.id}&fTaskId=${item.fId}`"
            v-if="item.IsBuy==1">
            进货下单
          </navigator>
        </view>
      </span>

    </order-item>
    <u-empty text="暂无数据" mode="list"
      v-if="!clist.length">
    </u-empty>

    <u-modal v-model="dialog" title="任务总览"
      width="90%" confirm-text="关闭"
      :mask-close-able="true">
      <view class="slot-content">
        <u-table>
          <u-tr class="u-tr">
            <u-th class="u-th" width="50%">客户名称
            </u-th>
            <u-th class="u-th" width="25%">时间
            </u-th>
            <u-th class="u-th" width="25%">是否完成
            </u-th>

          </u-tr>
          <u-tr class="u-tr"
            v-for="(item,index) in clist"
            :key="index"
            @click.native="$api.navigator('/pages/my_customer/my_customer_client?id='+item.MrkId)">
            <u-td class="u-td" width="50%">
              {{item.MrkName}}</u-td>
            <u-td class="u-td" width="25%">
              {{item.PlanTime}}</u-td>
            <u-td class="u-td" width="25%"   :class="{'red':item.NowStatus}">
              {{item.NowStatus===10?'已完成':'未完成'}}
            </u-td>

          </u-tr>
        </u-table>
      </view>
    </u-modal>

  </view>
</template>

<script>
import orderItem from '@/components/order-item'
export default {
  components: {
    orderItem
  },
  data() {
    return {
      taskDate: '选择时间',
      timeDialog: false,
      current: 0,
      show: false,
      dialog: false,
      keyword: '',
      img: this.urlimg + 'mini/',
      list: [
        {
          text: '客户资料'
        },
        {
          text: '商家总数据'
        },
        {
          text: '商家订单'
        }
      ],
      tabs: [
        {
          name: '未拜访（0）',
          state: 1
        },
        {
          name: '已拜访（0）',
          state: 10
        },
        {
          name: '全部（0）',
          state: 0
        }
      ],
      keywords: '',
      clist: [],
      formdata: [],
      isAllList: 1,
      page: 1,
      status: 'loading',
      loading: true,
      info: {
        PageSize: 10,
        PageIndex: 1,
        value: {
          MrkId: 0,
          VisitTime: '', //时间默认为空 表示全部时间
          Status: 1,
          Key: ''
        }
      },
      li: ''
    }
  },
  onShow(e) {
    uni.setNavigationBarTitle({
      title: '我的任务'
    })
    var d = new Date()
    this.taskDate = '${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}'
    this.info.value.VisitTime = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`

    this.defaultData()
    this.getList()
  },
  onReachBottom() {
    if (this.isAllList != 0) {
      this.info.PageIndex += 1
      this.getList()
    }
  },
  methods: {
    clickMsg(e) {
      console.log('🚀 ~ file: taskList.vue ~ line 89 ~ clickMsg ~ e', e)
      uni.navigateTo({
        url: `./taskDetail?id= ${e.id}&fId=${e.fId}`
      })
    },
    changeSearch() {
      var that = this
      this.defaultData(function () {
        that.getList()
      })
    },
    change(e) {
      console.log('🚀 ~ file: taskList.vue ~ line 192 ~ change ~ e', e)
      var that = this
      this.current = e
      this.info.value.Status = this.tabs[e].state
      this.defaultData(function () {
        that.getList()
      })
    },
    cellPhone(e) {
      uni.makePhoneCall({
        phoneNumber: e.phone
      })
    },
    toStore(e) {
      uni.openLocation({
        //​使用微信内置地图查看位置。
        latitude: parseFloat(e.lat), //要去的纬度-地址
        longitude: parseFloat(e.lon), //要去的经度-地址
        name: e.map_address
      })
    },
    gotoPage(url) {
      this.$api.navigator(url)
    },

    // clickMsg(e) {
    //   this.li = e
    //   this.show = true
    // },
    onSheet(e) {
      switch (e) {
        case 0:
          uni.navigateTo({
            url: 'my_customer_detail?id=' + this.li.id
          })
          break
        case 1:
          uni.navigateTo({
            url: 'my_customer_total?id=' + this.li.id
          })
          break
        case 2:
          uni.navigateTo({
            url: '../sale/order_customer?id=' + this.li.id
          })
          break
      }
    },
    changeDate(e) {
      this.info.value.VisitTime = `${e.year}-${e.month}-${e.day}`
      var that = this
      this.defaultData(function () {
        that.getList()
      })
    },
    defaultData(callback) {
      this.isAllList = 1
      this.info.PageIndex = 1
      this.clist = []
      this.status = 'loading'
      this.loading = true

      if (callback) {
        callback()
      }
    },
    getList() {
      let that = this
      this.$axios('api/UserTask/ListPaged', 'post', this.info).then(res => {
        if (!res.Value.List.length) {
          this.isAllList = 0
        }
        that.loading = false
        let list = res.Value.List.map(x =>
          Object.assign(x, {
            fAddress: x.Address,
            fName: x.MrkName,
            fTell: x.MrkTell,
            fPic: x.MrkPic,
            status: x.NowStatus,
            fClassSizeName: x.MrkSize,
            fId: x.Id,
            id: x.MrkId,
            fStreet: ''
          })
        )
        that.clist.push(...list)
      })

      this.$axios('api/UserTask/GeUserTaskInfo', 'post', this.info).then(res => {
        // that.formdata = res.Value.listInfo
        that.tabs = res.Value.stauslist
      })
    }
  }
}
</script>
 
 
 
 <style lang="scss">
.clist {
  margin-bottom: 16rpx;
  background-color: #ffffff;

  .top {
    padding: 34rpx 32rpx;
    box-sizing: border-box;

    .code {
      font-size: 32rpx;
      font-weight: 500;
      color: #34404a;
    }

    .state {
      font-size: 30rpx;
      font-weight: 400;
      color: #2b88fe;
    }
  }

  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;
    }

    .photoShowIcon {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 56rpx;
      height: 56rpx;
      margin-right: 24rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
    }

    .sname {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }
  }
}
.topsearch {
  padding: 10rpx;
}

page {
  background: #f8f9fc;
}
::v-deep .u-size-medium {
  padding: 0 20rpx !important;
}
</style>

